<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <title>购物车</title>
</head>
<body class="cutgeryBg">
<div class="shopcart">
    <!--标题-->
    <div class="navigation whiteBg">
        <p class="text-center cart_amount">购物车(0)</p>
        <p class="brown super-text cart_manage">管理</p>
    </div>
    <!--管理页面nav-->
    <div class="cart_edit clear whiteBg">
        <div class="fr edit_btn">
            <button class="move_collect">移入收藏夹</button>
            <button class="del">删除</button>
        </div>
    </div>
    <!--购物车内容-->
    <div class="cart_content">
        <ul class="cart_list">
            {foreach $list as $vo}

            <li data-value="{$vo.id}">
                <!--图片 选择框-->
                <div class="fl cart_img_info">
                    <i class="check"></i>
                    <div class="cart_img" style="position: relative;">
                        {if $vo.rest>0 && $vo.status==1}<a href="/index/shop/detail?id={$vo.mg_id}">{/if}
                            <img class="auto-img" src="{$vo.goods_spec_img}" {if $vo.rest==0 || $vo.status==2} style="opacity: .3" {/if}/>
                            {if $vo.rest==0 || $vo.status==2}
                            <div class="opacity_div" style="position: absolute;top: 0;left: 0;right: 0;width: 1.92rem;height: 1.92rem;background: rgba(0,0,0,.2);border-radius: 0.1rem;">
                                <p class="super-text smoth text-center white" style="margin-top:43%">{if $vo.status==2}已下架{elseif $vo.rest==0}已售罄{/if}</p>
                            </div>
                            {/if}
                        {if $vo.rest>0 && $vo.status==1}</a>{/if}
                    </div>
                </div>
                <div class="fr cart_detail">
                    <p class="super-text smoth bold">{$vo.goods_title}</p>
                    <p class="normall-text lightgery" style="margin-bottom: 0">{$vo.goods_spec}</p>
                    <p class="normall-text lightgery">{if $vo.status==1}剩余：{$vo.rest}{/if}</p>
                    <div class="cart_cost clear">
                        <p class="fl super-text brown cart_price">￥{$vo.price}</p>
                        <div class="fr num clear-flow cart_ipt">
                            <span class="b fl">-</span>
                            <input type="text" name="" oninput="this.value=(parseInt(this.value)>'{$vo.rest}') ? '{$vo.rest}': this.value" value="{$vo.num}"/>
                            <span class="b fr" data-rest="{$vo.rest}">+</span>
                        </div>
                    </div>
                </div>
            </li>

            {/foreach}
        </ul>
    </div>
    <!--结算-->
    <div class="cart_account clear whiteBg">
        <div class="cart_check_all fl">
            <i class="check"></i>
            <span class="super-text lightgery block">全选</span>
        </div>
        <div class="fr cart_btn">
            <div class="cart_money super-text">
                <span class="smoth">应付:</span>
                <span class="brown bold account_price">￥ 0.00</span>
                <button class="account_btn" disabled="">结算(0)</button>
            </div>
        </div>
    </div>
    <!--底部tabs-->
    <div class="nav-tabs">
        <ul class="nav-list clear">
            <a href="/index/entry/index">
                <li>
                    <i class="home"></i>
                    <p class="text-center normall-text">首页</p>
                </li>
            </a>
            <a href="javascript:;">
                <li>
                    <i class="shopcart-selected"></i>
                    <p class="text-center normall-text on">购物车</p>
                </li>
            </a>
            <a href="/index/peijing/index">
                <li>
                    <i class="query"></i>
                    <p class="text-center normall-text">配镜查询</p>
                </li>
            </a>
            <a href="/index/user/index">
                <li>
                    <i class="mine"></i>
                    <p class="text-center normall-text">我的</p>
                </li>
            </a>
        </ul>
    </div>
</div>
<!--弹窗删除商品-->
<div class="cart_pop">
    <div class="pop_msg">
        <img class="pop_close" src="__STATIC__/index/img/icon-close.png"/>
        <p class="text-center super-text smoth bold"></p><!--文字-->
        <div class="pop_btn">
            <button class="cancel">取消</button>
            <button class="ensure">确定</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/layer/layer.js"></script>
<!--<script type="text/javascript" src="__STATIC__/index/js/shopcart.js"></script>-->
<script>
    //购物车逻辑
    //弹出管理页面
    $('.cart_manage').on('click', function () {
        $('.cart_edit').toggleClass('block')
        if ($('.cart_edit').hasClass('block')) {
            $(this)[0].innerText = '完成'
        } else {
            $(this)[0].innerText = '管理'
        }
    })
    //购物车
    $(function () {
        //加载购物车内商品种类数量
        var $shopNum = $('.cart_list li').length
        //改变标题商品数量
        $('.cart_amount').html('购物车(' + $shopNum + ')');

        function priceminus() {
            //遍历勾选按钮
            $('.cart_list .check').each(function () {
                $(this).removeClass('checked');
                $allPrice = 0;
                $allNum = 0;
                $('.account_price').text('￥ ' + $allPrice.toFixed(2));

            });
            //点击全选时选上的数量有多少来判断结算多少个商品
            $('.account_btn').html('结算(' + 0 + ')');
            //结算的钱
            $('.account_price').text('￥ ' + $allPrice.toFixed(2));
        }

        //商品总价增加
        function priceAdd() {
            //商品总价
            $allPrice = 0;
            //商品数量
            $allNum = 0;
            $('.cart_list .check').each(function () {
                $(this).addClass('checked');
                //商品单价
                var $price = Number($(this).parents('.cart_img_info').next('.cart_detail').children('.cart_cost').children('.cart_price').text().replace('￥', ''))
                //商品数量
                var $goodsNum = Number($(this).parents('.cart_img_info').next('.cart_detail').children('.cart_cost').children('.cart_ipt').children('input').val())
                $allNum = $allNum + $goodsNum;
                $allPrice += $price * $goodsNum;
            });
            //点击全选时选上的数量有多少来判断结算多少个商品
            $('.account_btn').html('结算(' + $allNum + ')');
            //结算的钱
            $('.account_price').html('￥ ' + $allPrice.toFixed(2));
        }

        //点击全选按钮
        var $allPrice = 0;
        var $allNum = 0;
        $('.cart_check_all .check').on('click', function () {
            $(this).toggleClass('checked');
            var bool = $(this).hasClass('checked');//判断是否选上
            if (bool) {
                priceAdd();
            } else {
                priceminus();
            }
            //判断按钮是否可以点击
            checkbtn();
        })
        //商品单选
        $('.cart_list .check').each(function (index, ele) {
            $(ele).click(function () {
                $(this).toggleClass('checked');

                var checkLen = $('.cart_list .check').length;
                //购物车商品总数量
                var checkedLen = $('.cart_list .check.checked').length;
                //购物车选上的数量
                var bool = $(this).hasClass('checked');
                if (checkLen == checkedLen) {
                    $('.cart_check_all .check').addClass('checked');
                } else if (checkLen != checkedLen) {
                    $('.cart_check_all .check').removeClass('checked');
                }

                //商品选上,购物车底部总价改变
                var $price = Number($(this).parents('.cart_img_info').next('.cart_detail').children('.cart_cost').children('.cart_price').text().replace('￥', '')).toFixed(2)
                var $goodsNum = Number($(this).parents('.cart_img_info').next('.cart_detail').children('.cart_cost').children('.cart_ipt').children('input').val())
                if (bool) {
                    $allPrice += $price * $goodsNum;
                    $allNum += $goodsNum;
                } else {
                    $allPrice -= $price * $goodsNum;
                    $allNum -= $goodsNum;
                }
                //点击全选时选上的数量有多少来判断结算多少个商品
                $('.account_btn').html('结算(' + $allNum + ')');
                //结算的钱
                $('.account_price').text('￥ ' + $allPrice.toFixed(2));
                //判断按钮是否可以点击
                checkbtn();
            })
        })
        //商品数量变化
        $('.cart_list .b').on('click', function () {
            if ($(this)[0].innerText == '-') {
                //数量减少
                if ($(this).parents('.cart_ipt').children('input').val() > 1) {
                    //输入框数量
                    var val = Number($(this).parents('.cart_ipt').children('input').val())
                    //商品价格
                    var $price = Number($(this).parents('.cart_ipt').prev('.cart_price').text().replace('￥', ''))
                    //判断是否选上
                    var bool = $(this).parents('li').find('.check').hasClass('checked');
                    val -= 1;
                    if (bool) {
                        $allPrice -= $price;
                        $allNum -= 1;
                        //点击全选时选上的数量有多少来判断结算多少个商品
                        $('.account_btn').html('结算(' + $allNum + ')');
                        //结算的钱
                        $('.account_price').text('￥ ' + $allPrice.toFixed(2));
                    }
                    //改变input框内的值
                    var bool = $(this).parents('li').find('.check').hasClass('checked');
                    //改变input框内的值
                    $(this).parents('.cart_ipt').children('input').val(val)
                } else {
                    layer.msg('数量不能再少了~', {time: 1000});
                }
            }
            else if ($(this)[0].innerText == '+') {
                if ($(this).parents('.cart_ipt').children('input').val() < $(this).data('rest')){
                    //数量增加
                    //输入框数量
                    var val = Number($(this).parents('.cart_ipt').children('input').val())
                    val += 1;
                    //判断是否选上
                    var bool = $(this).parents('li').find('.check').hasClass('checked');
                    //商品单价
                    var $price = Number($(this).parents('.cart_ipt').prev('.cart_price').text().replace('￥', ''))
                    if (bool) {
                        $allPrice += $price;
                        $allNum += 1;
                        //点击全选时选上的数量有多少来判断结算多少个商品
                        $('.account_btn').html('结算(' + $allNum + ')');
                        //结算的钱
                        $('.account_price').text('￥ ' + $allPrice.toFixed(2));
                    }
                    //改变input框内的值
                    $(this).parents('.cart_ipt').children('input').val(val)

                } else {
                    layer.msg('数量不能再多了~', {time: 1000});
                }
            }
        })
        //input框输入变化
        $('.cart_list li input[type=text]').change(function () {
            //重新重置结算的数量和总价
            $allPrice = 0
            $allNum = 0;
            var val = $(this).val();
            var goodsVal = Math.round(val);
            if (goodsVal < 1) {
                goodsVal = 1;
            } else if (isNaN(goodsVal)) {
                goodsVal = 1;
            }
            $(this).val(goodsVal);
            //商品选中
            $('.cart_list .check.checked').each(function () {
                //商品选上,购物车底部总价改变
                var $price = Number($(this).parents('.cart_img_info').next('.cart_detail').children('.cart_cost').children('.cart_price').text().replace('￥', ''))
                var $goodsNum = Number($(this).parents('.cart_img_info').next('.cart_detail').children('.cart_cost').children('.cart_ipt').children('input').val())
                //商品总价
                $allPrice += $price * $goodsNum;
                //商品数量
                $allNum += $goodsNum;

                //点击全选时选上的数量有多少来判断结算多少个商品
                $('.account_btn').html('结算(' + $allNum + ')');
                //结算的钱
                $('.account_price').text('￥ ' + $allPrice.toFixed(2));
            })
        })
        //删除商品
        //移入收藏夹
        $('.edit_btn button').on('click', function () {
            var checkLen = $('.cart_list .check').length;
            //购物车商品总数量
            var checkedLen = $('.cart_list .check.checked').length;
            //购物车选上的数量
            var bool = $('.cart_list li').find('.check').hasClass('checked');
            if ($(this).text() == '移入收藏夹') {
                $('.cart_pop p').html('确定移入收藏夹吗?')
            } else if ($(this).text() == '删除') {
                $('.cart_pop p').html('确定要删除该商品吗?')
            }
            if (checkLen != 0 && checkedLen != 0 && checkLen == checkedLen) {
                $('.cart_check_all .check').addClass('checked');
            } else if (checkLen != checkedLen) {
                $('.cart_check_all .check').removeClass('checked');
            } else if (checkLen == 0 && checkedLen == 0) {
                $('.cart_check_all .check').removeClass('checked');
                $('.account_btn').addClass('disabled');
            }
            if (bool) {
                //如果勾选
                showTips('.cart_pop')
            }

            //判断按钮是否可以点击
            checkbtn();
        })




        //弹出层禁止手指滑动
        $('.cart_pop').on('touchmove', function (e) {
            e.preventDefault()
        })

        //弹出框
        function showTips(classname) {
            return $(classname).show()
        }

        function hideTips(classname) {
            return $(classname).hide()
        }

        //删除收藏确定按钮
        $('.ensure').on('click', function () {
            var bool = $('.cart_list li .check').hasClass('checked');
            //判断是否选上
            if (bool) {
                var cart_id = [];

                if ($('.cart_pop p').text() == '确定要删除该商品吗?'){
                    //删除
                    $('.cart_list li').each(function () {
                        if ($(this).children('.cart_img_info').children('.check').hasClass('checked')) {
                            cart_id.push($(this).data('value'));
                            $(this).remove();
                            //选上的商品的数量
                            var $goodsNum = Number($(this).children('.cart_detail').children('.cart_cost').children('.cart_ipt').children('input').val());
                            //选中商品的类型长度
                            var $delNum = $('.cart_list li').siblings().find('.checked').length;
                            //减去购物车的数量
                            var $shopNum = Number($('.cart_list li').length) - Number($delNum);
                            //选中商品的数量
                            var allLength = $('.cart_list li').length;
                            //总价
                            $allPrice = 0;
                            //总数
                            $allNum -= $goodsNum;
                            //商品总价
                            $('.account_price').text('￥ ' + $allPrice.toFixed(2));
                            //商品数量
                            $('.account_btn').html('结算(' + $allNum + ')');
                            //标题
                            $('.cart_amount').html('购物车(' + $shopNum + ')');
                            //如果全部删除
                            if (allLength == 0) {
                                $('.cart_check_all .check').removeClass('checked');
                                //去除全选按钮
                                $('.account_btn').attr('disabled', true);
                                //禁用结算按钮
                            }
                            checkbtn();
                        }
                    })

                    if (cart_id.length>0){
                        $.ajax({
                            url:"del",
                            type:"post",
                            data:{id:cart_id,type:'del'},
                            success:function (res) {

                            }
                        })
                    }

                    //商品删除
                    hideTips('.cart_pop')
                    layer.msg('删除商品成功', {time: 2000})

                } else if ($('.cart_pop p').text() == '确定移入收藏夹吗?'){
                    $('.cart_list li').each(function (){
                        if ($(this).children('.cart_img_info').children('.check').hasClass('checked')){
                            cart_id.push($(this).data('value'));
                        }
                    })

                    if (cart_id.length>0){
                        $.ajax({
                            url:"del",
                            type:"post",
                            data:{id:cart_id,type:'coll'},
                            success:function (res) {

                            }
                        })
                    }

                    //商品移入收藏夹
                    hideTips('.cart_pop');
                    layer.msg('移入收藏夹成功', {time: 2000})
                }

            }
        })

        //提交订单
        $('.account_btn').on('click', function () {
            var cart_id = [];
            var cart_num = [];
            $('.cart_list li').each(function (){
                if ($(this).children('.cart_img_info').children('.check').hasClass('checked')){
                    cart_id.push($(this).data('value'));
                    cart_num.push($(this).find('input').val());
                }
            })

            if(cart_id.length>0 && cart_num.length>0){
                $.ajax({
                    url:"con",
                    type:'post',
                    data:{id:cart_id,num:cart_num},
                    success:function (res) {
                        if(res.code=='error'){
                            layer.msg(res.msg, {time: 2000})
                        }else {
                            var id = res.id.join('|');
                            window.location.href="conf?id="+id;
                        }
                    }
                })
            }
            // window.location.href = 'confirmOrder.html'
        })



        //点击弹窗取消按钮
        $('.cancel').on('click', function () {
            hideTips('.cart_pop')
        })
        //点击弹窗关闭按钮
        $('.cart_pop .pop_close').on('click', function () {
            hideTips('.cart_pop')
        })

        //判断按钮是否要禁用
        function checkbtn() {
            var check = $('.cart_list .check');
            $('.cart_list .check').each(function () {
                var checkLen = $('.cart_list .check').length;
                //购物车商品总数量
                var checkedLen = $('.cart_list .check.checked').length;
                //购物车选上的数量
                if (checkedLen > 0) {
                    $('.account_btn').removeAttr('disabled', true);
                } else {
                    $('.account_btn').attr('disabled', true);
                    //商品数量
                    $('.account_btn').html('结算(' + 0 + ')');
                }
            })
        }

        checkbtn();

    })
</script>
</body>
</html>